<template>
<div style="padding-bottom: 50px;overflow-y: auto;">
        <div class="tabview" @click="changeView('1')">
                <div style="flex: 1;display:flex" class="font16" v-if="topNameList[0]">
                    <img :src="require('../../assets/images/menu_icon1.png')" class="menu_img">{{topNameList[0].name}}</div>
                <van-icon  name="arrow-up" color="#969799" size="16px" 
                            :class="[ showTabView1==true?'tabview_icon_up':'tabview_icon_down']"/></div>
                <van-divider class="tabview_divider"/>
        <div v-if="topNameList[0]&&topNameList[0].contents.content.length > 0" class="tabview_list">
            <div v-for="(item,index) in (showTabView1?topNameList[0].contents.content:topNameList[0].contents.content.slice(0,5))" 
            :key='index' class="mt6 mb6" @click="todetail(topNameList[0].name,item)">
            <!-- <div v-for="(item,index) in newsLits" :key='index' class="mt5" > -->
                <span class="color-red">[{{item.categoryName}}]</span>
                <span class="color-2">{{item.title}}</span>
            </div>
        </div>
        <van-divider v-if="itemNameList[0]" :style="{  borderColor: '#ebedf0',margin: '0px' ,borderWidth: '6px 0 0'}"></van-divider>
        <div class="tabview" @click="changeView('2')">
                <div style="flex: 1;display:flex" class="font16" v-if="itemNameList[0]">
                    <img :src="require('../../assets/images/menu_icon2.png')" class="menu_img">{{itemNameList[0].name}}</div>
                <van-icon  name="arrow-up" color="#969799" size="16px" 
                            :class="[ showTabView2==true?'tabview_icon_up':'tabview_icon_down']"/></div>
                <van-divider class="tabview_divider"/>
        <div v-if="itemNameList[0]&&itemNameList[0].contents.content.length > 0" class="tabview_list">
              <div v-for="(item,index) in (showTabView2?itemNameList[0].contents.content:itemNameList[0].contents.content.slice(0,5))" 
              :key='index' class="mt6 mb6" @click="todetail(itemNameList[0].name,item)">
                <span class="color-red">[{{item.categoryName}}]</span>
                <span class="color-2">{{item.title}}</span>
            </div>
        </div>
        <van-divider v-if="itemNameList[1]" :style="{  borderColor: '#ebedf0',margin: '0px' ,borderWidth: '6px 0 0'}"></van-divider>
       <van-collapse  v-model="activeNames" accordion :border="false" @change="changeCollapse" >
            <van-collapse-item name="1" v-if="itemNameList[1]">
                <template #title>
                    <div   style="display:flex">
                        <div @click="toNext(itemNameList[1].name,itemNameList[1].id)" @click.stop.prevent='' style="display:flex"  class="font16">
                            <img :src="require('../../assets/images/menu_icon3.png')" class="menu_img">{{itemNameList[1].name}}</div>
                    </div>
                </template>
                <div  v-for="(item,index) in itemNameList[1].contents.content" :key='index' class="mt6 mb6" @click="todetail(itemNameList[1].name,item)">
                    <span class="color-red">[{{item.categoryName}}]</span>
                    <span class="color-2">{{item.title}}</span>
                </div>
            </van-collapse-item>
             <van-divider v-if="itemNameList[2]" :style="{  borderColor: '#ebedf0',margin: '0px' ,borderWidth: '6px 0 0'}"></van-divider>
            <van-collapse-item name="2" v-if="itemNameList[2]">
                <template #title>
                    <div style="display:flex">
                        <div @click="toNext(itemNameList[2].name,itemNameList[2].id)" @click.stop.prevent='' style="display:flex"  class="font16">
                            <img :src="require('../../assets/images/menu_icon4.png')" class="menu_img">{{itemNameList[2].name}}</div>
                    </div>
                </template>
                <div v-for="(item,index) in itemNameList[2].contents.content" :key='index' class="mt6 mb6" @click="todetail(itemNameList[2].name,item)">
                    <span class="color-red">[{{item.categoryName}}]</span>
                    <span class="color-2">{{item.title}}</span>
                </div>
            </van-collapse-item>
             <van-divider v-if="itemNameList[3]" :style="{  borderColor: '#ebedf0',margin: '0px' ,borderWidth: '6px 0 0'}"></van-divider>
            <van-collapse-item name="3" v-if="itemNameList[3]">
                <template #title>
                    <div style="display:flex">
                        <div @click="toNext(itemNameList[3].name,itemNameList[3].id)" @click.stop.prevent='' style="display:flex"  class="font16">
                            <img :src="require('../../assets/images/menu_icon5.png')" class="menu_img">{{itemNameList[3].name}}</div>
                    </div>
                </template>
                <div v-for="(item,index) in itemNameList[3].contents.content" :key='index' class="mt6 mb6" @click="todetail(itemNameList[3].name,item)">
                    <span class="color-red">[{{item.categoryName}}]</span>
                    <span class="color-2">{{item.title}}</span>
                </div>
            </van-collapse-item>
             <van-divider v-if="itemNameList[4]" :style="{  borderColor: '#ebedf0',margin: '0px' ,borderWidth: '6px 0 0'}"></van-divider>
            <van-collapse-item name="4" v-if="itemNameList[4]">
                <template #title>
                    <div style="display:flex">
                        <div @click="toNext(itemNameList[4].name,itemNameList[4].id)" @click.stop.prevent='' style="display:flex"  class="font16">
                            <img :src="require('../../assets/images/menu_icon6.png')" class="menu_img">{{itemNameList[4].name}}</div>
                    </div>
                </template>
                <div v-for="(item,index) in itemNameList[4].contents.content" :key='index' class="mt6 mb6" @click="todetail(itemNameList[4].name,item)">
                    <span class="color-red">[{{item.categoryName}}]</span>
                    <span class="color-2">{{item.title}}</span>
                </div>
            </van-collapse-item>
        </van-collapse>

</div>
  
</template>
<script>
import {findAllIndex,findAllBoutique} from '@/api/gettodo'
import {mapGetters} from "vuex"
import { Notify,Dialog, Toast } from 'vant'
   export default{
       name:'gongzuotai',
       data() {
            return {
                 activeNames: '',
                 newsLits:[{type:"类型1",title:"标题1"},{type:"类型2",title:"标题2"},{type:"类型3",title:"标题3"},
                            {type:"类型4",title:"标题4"},{type:"类型5",title:"标题5"},{type:"类型6",title:"标题6"},{type:"类型6",title:"标题6"}
                            ,{type:"类型6",title:"标题6"},{type:"类型6",title:"标题6"}],
                 hotNewsLits:[{type:"hot类型1",title:"标题1"},{type:"hot类型2",title:"标题2"},{type:"hot类型3",title:"标题3"},
                                {type:"hot类型4",title:"标题4"},{type:"hot类型5",title:"标题5"},{type:"hot类型6",title:"标题6"}],
                 showTabView1:false,
                 showTabView2:false,  
                 topNameList:[],   
                 itemNameList:[],               
            };
       },
       computed:{
            ...mapGetters(['user']),
        },
       created(){
           this.getNewsList()
       },
       methods:{
            getNewsList(){
                Toast.loading({
                    message:'加载中',
                    forbidClick:false
                });
                findAllBoutique(Object.assign({userName:this.user.userName}))
                    .then((result)=>{
                        Toast.clear();
                        if(!result.data){
                            Notify(result.message);
                            return;
                        }
                        if(result.data.data){
                            this.topNameList=result.data.data;
                        }
                        this.getCollapseItemName();
                    })
            },
             getCollapseItemName(){
                Toast.loading({
                    message:'加载中',
                    forbidClick:false
                });
                findAllIndex(Object.assign({userName:this.user.userName}))
                    .then((result)=>{
                        Toast.clear();
                        if(!result.data){
                            Notify(result.message);
                            return;
                        }
                        if(result.data.data){
                            this.itemNameList=result.data.data;
                        }
                    })
            },
            
            toNext(value,parentId){
                console.log('当前点击的栏目是第'+value+'个'+parentId);
                 this.$router.push({
                    name:'newColorfulLife',
                    query:{
                        parentId:parentId,
                        title:value
                    }
                });
            },changeView(value){
                console.log('打开关闭前两个'+value);
                if(value=='1'){
                     this.showTabView1=!this.showTabView1;
                     this.showTabView2=false;
                }else{
                     this.showTabView2=!this.showTabView2;
                     this.showTabView1=false;
                }
                this.activeNames='';
            },changeCollapse(value){
                 console.log('改变的条目id'+value);   
                 if(value){
                    this.showTabView1=false;
                    this.showTabView2=false;
                 }
            },todetail(index,item){
                console.log('点击的条目是'+index+'id是'+item.id)
                this.$router.push({
                    path: "/newcolordetail",
                    query: { 
                        itemId: item.id,
                        title : index
                         },
                });
            }
       }
   }
</script>
<style scoped>

.tabview{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
}
.tabview_icon_up{
    transition: all 0.3s;
    margin-left: 4px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
}
.tabview_icon_down{
    transform:rotate(180deg);
    transition: all 0.3s;
    margin-left: 4px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
}
.tabview_divider{
    padding-left: 16px;
    padding-right: 16px;
    background-color: #fff;
    margin:0px
}
.tabview_list{
    padding: 0px 16px;
    color: #969799;
    font-size: 14px;
    line-height: 1.5; 
    background-color: #fff;
}
.menu_img{
    margin-right:5px;
    width:22px;
    height:22px
}
::v-deep .van-collapse-item__content {
    padding: 0px 16px;
    color: #969799;
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
}
</style>